<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>popup</title>
  <link rel="stylesheet" href="../../common/style/reset.css">
  <script src="../../common/cdn/lunar.js"></script>
  <style>

    html,body{
      border-radius: 3px;
    }



    .time-popup-header{
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      -webkit-app-region: drag;
      padding: 5px;
      background-color: cadetblue;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      font-size: 14px;
      align-items: center;
    }

    .time-popup-header .btn-box{
      -webkit-app-region: no-drag;
    }

    .time-popup-main{
      padding: 20px;
      background-color: rgb(245, 245, 245);
    }

    .selection-date{
      display: flex;
      justify-content: space-between;
    }

    label{
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 3px;
      font-size: 14px;
      display: flex;
      align-items: center;
      padding: 5px;
      background-color: #fff;
    }

    label ~ label{
      margin-left: 10px;
    }

    input{
      height: 30px;
      outline: none;
      border: none;
      background-color: transparent;
      font-size: 14px;
    }

    .content-edit{
      width: 100%;
      height: 100px;
      margin-top: 30px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 3px;
      background-color: #fff;
      outline: none;
      padding: 10px;
      word-break: break-all;
    }

    .content-edit:empty:before{
      content: attr(data-placeholder);
      color: rgba(160, 160, 160, 0.6);
      display: block; 
    }
    .content-edit:focus:before,
    .content-edit:not(:empty):before {
      content: none;
    } 

    .time-popup-footer{
      width: 100%;
      margin-top: 30px;

    }

    .btn-save{
      display: block;
      width: 100px;
      height: 40px;
      background-color: cadetblue;
      border: none;
      border-radius: 3px;
      color: #fff;
      font-size: 14px;
      margin: 0 0 0 auto;
    }
  </style>
</head>
<body>
  <div class="time-popup-box">
    <div class="time-popup-header">
      <div class="header-title">新增一条时间轴</div>
      <div class="btn-box">
        <icon-svg name="closure"></icon-svg>
      </div>
    </div>
    <div class="time-popup-main">
      <div class="selection-date">
        <label>
          <input class="year" style="width: 80px;"   type="number" max="2099" min="1999" maxlength="4">年
        </label>
        <label>
          <input class="month " style="width: 40px;" type="number" max="12" maxlength="2">月
        </label>
        <label>
          <input class="day" style="width: 40px;" type="number" max="30" maxlength="2">日
        </label>
        <label>
          <input class="hour" style="width: 40px;" type="number" max="23" maxlength="2">时
        </label>
        <label>
          <input class="point" style="width: 40px;" type="number" max="59" maxlength="2">分
        </label>
      </div>
      <div class="content-edit" data-placeholder="请输入..." contenteditable="plaintext-only"></div>
      <div class="time-popup-footer">
        <button class="btn-save">保存</button>
      </div>
    </div>
    
  </div>
</body>
<script type="module">
  import IconSvg from "../../components/IconSvg/IconSvg.js";
  customElements.define("icon-svg", IconSvg);
  let monthNum;

  const btnBox = document.querySelector('.btn-box');
  const yearEl = document.querySelector(".year");
  const monthEl = document.querySelector(".month");
  const dayEl = document.querySelector(".day");
  const hourEl = document.querySelector(".hour");
  const pointEl = document.querySelector(".point");
  const contentEditEl = document.querySelector(".content-edit");
  const btnSaveEl = document.querySelector(".btn-save");

  if(window.ipcRenderer){
    window.ipcRenderer.on('init', (event, res)=>{
      if(res){
        let data = JSON.parse(res);
        initDate(data.time);
        contentEditEl.innerText = data.content;
      }else{
        initDate();
      };

    });
  }


  const setMonthNum = () => {
    let year = yearEl.value;
    let month = monthEl.value;
    monthNum = SolarUtil.getDaysOfMonth(year,month);
    if(!monthNum)return;
    dayEl.max = monthNum;
    let value = dayEl.value;
    if(value < 1){dayEl.value = '01'; return};
    if(value > monthNum){dayEl.value = monthNum; return};
    if (value.length === 1) {
      dayEl.value = `0${value}`;
    }
  }


  const initDate = (time) => {
    let date;
    if(time){
      date = new Date(time);
    }else{
      date = new Date();
    }
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hour = date.getHours();
    const point = date.getMinutes();
    yearEl.value = year;
    monthEl.value = month < 10 ? `0${month}` : month;
    dayEl.value = day < 10 ? `0${day}` : day;
    hourEl.value = hour < 10 ? `0${hour}` : hour;
    pointEl.value = point < 10 ? `0${point}` : point;
    setMonthNum();
    contentEditEl.focus();
    
  }

  initDate();

  const getDate = () => {
    const year = yearEl.value;
    const month = monthEl.value;
    const day = dayEl.value;
    const hour = hourEl.value;
    const point = pointEl.value;

    return new Date(year, month - 1, day, hour, point).getTime();
  };



  const filterNum = (e, min, max, length) => {
    const value = e.target.value;
    if (value > max) {
      e.target.value = max;
    }
    if (value.length > length) {
      e.target.value = value.slice(0, length);
    }
  };


  yearEl.oninput = (e) => {
    filterNum(e, 1999, 2099, 4)
    setMonthNum();
  };
  monthEl.oninput = (e) => {
    filterNum(e, 1, 12, 2);
    setMonthNum();
  };
  dayEl.oninput = (e) => filterNum(e, 1, monthNum, 2);
  hourEl.oninput = (e) => filterNum(e, 0, 23, 2);
  pointEl.oninput = (e) => filterNum(e, 0, 59, 2);

  yearEl.onchange = (e) => {
    let value = e.target.value;
    if(value < 1999)e.target.value = 1999;
    if(value > 2099)e.target.value = 2099;
  }
  monthEl.onchange = (e) => {
    let value = e.target.value;
    if(value < 1){e.target.value = '01'; return};
    if(value > 12){e.target.value = 12; return};
    if (value.length === 1) {
        e.target.value = `0${value}`;
    }
  }
  dayEl.onchange = (e) => {
    let value = e.target.value;
    if(value < 1){e.target.value = '01'; return};
    if(value > monthNum){e.target.value = monthNum; return};
    if (value.length === 1) {
        e.target.value = `0${value}`;
    }
  }
  hourEl.onchange = (e) => {
    let value = e.target.value;
    if(value < 0){e.target.value = '00'; return};
    if(value > 23){e.target.value = 23; return};
    if (value.length === 1) {
        e.target.value = `0${value}`;
    }
  }
  pointEl.onchange = (e) => {
    let value = e.target.value;
    if(value < 0){e.target.value = '00'; return};
    if(value > 59){e.target.value = 59; return};
    if (value.length === 1) {
        e.target.value = `0${value}`;
    }
  }

  

  btnBox.addEventListener('click', (e) => {
    window.closeWin();
  })

  btnSaveEl.addEventListener('click', (e) => {
    let data = {
      content: contentEditEl.innerText,
      time: getDate(),
      remind: false
    }
    ipcRenderer.sendTo(window.senderId, 'time-notes-data', data);
    window.closeWin();
  })

</script>
</html>